<template>
	<div>
		<!-- 角色选择下拉框，始终显示 -->
		<el-form :inline="true" style="margin-bottom: 20px">
			<el-form-item label="选择角色">
				<el-select
					style="width: 200px"
					v-model="selectedRoleId"
					placeholder="请选择要编辑的角色"
					clearable
				>
					<el-option
						v-for="role in roleList"
						:key="role.roleId"
						:label="role.roleName"
						:value="role.roleId"
					></el-option>
				</el-select>
			</el-form-item>
		</el-form>

		<!-- 只有在选择了角色后，才显示保存按钮和权限树 -->
		<template v-if="selectedRoleId">
			<el-button type="primary" color="#000" @click="onSaveAuth"
				>保存权限</el-button
			>
			<el-tree
				ref="treeRef"
				:data="authList"
				:props="treeProps"
				show-checkbox
				:check-strictly="true"
				node-key="roleId"
				:default-checked-keys="checkedKeys"
				:default-expand-all="true"
			/>
		</template>

		<!-- 未选择角色时，显示提示信息 -->
		<el-empty v-else description="请先在上方选择一个角色来管理其权限"></el-empty>
	</div>
</template>

<script setup lang="ts">
import { getAuthList } from "@/api/auth.js";
import { getRoleList } from "@/api/role.js";
import { IAuth, IRole } from "@/types/common.js";
import { ElMessage } from "element-plus";
import type { ElTree } from "element-plus";


// --- 状态定义 ---
const route = useRoute();
const treeRef = ref<InstanceType<typeof ElTree>>();

const treeProps = {
	children: "roleList",
	label: "name",
};

const authList = ref<IAuth[]>([]); // 权限树的完整数据
const roleList = ref<IRole[]>([]); // 角色列表的完整数据
const checkedKeys = ref<number[]>([]); // 当前需要勾选的权限ID
const selectedRoleId = ref<number | undefined>(undefined); // 当前选中的角色ID，用 null 表示未选择

// --- 核心逻辑：初始化 ---
onMounted(async () => {
	// 1. 并行获取所有基础数据（权限列表和角色列表）
	const [authRes, roleRes] = await Promise.all([getAuthList(), getRoleList()]);
	authList.value = authRes;
	roleList.value = roleRes;

	// 2. 检查路由是否携带了角色ID (处理从角色列表页跳转过来的情况)
	const roleIdFromQuery = Number(route.query.id);
	if (roleIdFromQuery) {
		// 如果路由传入了ID，则将该ID设置为当前选中的角色
		selectedRoleId.value = roleIdFromQuery;
	}
});

// --- 核心逻辑：响应式联动 ---
// 使用 watch 监听 selectedRoleId 的变化
watch(selectedRoleId, (newRoleId, _oldRoleId) => {
	// 如果没有选择角色（或清空了选择），则清空权限勾选
	if (!newRoleId) {
		checkedKeys.value = [];
		return;
	}

	// 根据新选择的角色ID，从角色列表中找到对应的角色数据
	const selectedRole = roleList.value.find(
		(role) => role.roleId === newRoleId
	);

	if (selectedRole) {
		// 如果找到了角色，将其权限列表赋值给 checkedKeys，从而更新树的勾选
		checkedKeys.value = selectedRole.authority!;
		
		// 关键一步：当数据变化时，手动调用 setCheckedKeys 来确保视图立即更新
		// 这是比依赖 :default-checked-keys 更可靠的方式
		if (treeRef.value) {
			treeRef.value.setCheckedKeys(selectedRole.authority!, false);
		}
	}
});

// --- 事件处理 ---
// 点击保存按钮
const onSaveAuth = () => {
	// 确保 tree 实例存在且有角色被选中
	if (!treeRef.value || !selectedRoleId.value) {
		ElMessage.warning("请先选择一个角色！");
		return;
	}

	// 使用 getCheckedKeys() 获取最终要提交的权限ID数组
	const finalCheckedKeys = treeRef.value.getCheckedKeys();

	try {
		console.log(`正在为角色 ${selectedRoleId.value} 保存权限:`, finalCheckedKeys);
		// 伪代码: 调用真实API保存
		// await savePermissionsAPI(selectedRoleId.value, finalCheckedKeys);
		ElMessage.success(
			`为角色 ${selectedRoleId.value} 保存权限成功！`
		);
	} catch (error) {
		console.error("保存权限失败:", error);
		ElMessage.error("保存权限失败！");
	}
};
</script>